<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>技能</title>
    <link href="/css/header_and_nav.css" rel="stylesheet">
    <link href="/css/list.css" rel="stylesheet">
</head>
<body>
    <header th:include="header :: copy"></header>
    <nav th:include="nav :: my_nav" class="my_nav"></nav>

    <div class="container">
        <div>
            <button class="my_list_button" id="addSkill">添加技能</button>
        </div>
        <ul class="my_list">
            <li th:each="skill: ${skills}">
                <input type="hidden" th:value="${skill.id}"/>
                <span th:text="${skill.name}"></span>
                <span th:text="${skill.description}"></span>
                <span class="skill_button">
                    <button class="my_list_button" name="editSkill">修改</button>
                    <form action="/skillDelete.do" method="post">
                        <input type="hidden" name="id" th:value="${skill.id}"/>
                        <button class="my_delete_button" type="submit">删除</button>
                    </form>
                </span>
            </li>
        </ul>

        <div class="my_list_buttons">
            <form action="/skillList.do" method="post">
                <input type="hidden" name="page" th:value="${page - 1}"/>
                <button  class="my_list_button" type="submit" th:if="${page > 1}">上一页</button>
            </form>
            <form action="/skillList.do" method="post">
                <input type="hidden" name="page" th:value="${page + 1}"/>
                <button  class="my_list_button" type="submit" th:if="${size == max_size}">下一页</button>
            </form>
        </div>
    </div>

    <div class="modal" id="addSkillModal">
        <div class="modal_content">
            <span class="close">&times;</span>
            <form action="/addSkill.do" method="post">
                <label>技能名称：</label>
                <input type="text" name="name"/>
                <label>技能描述：</label>
                <textarea name="description" rows="4"  cols="50"></textarea>
                <button class="my_list_button" type="submit">添加</button>
            </form>
        </div>
    </div>

    <div class="modal" id="editSkillModal">
        <div class="modal_content">
            <span class="close">&times;</span>
            <form action="/editSkill.do" method="post">
                <input type="hidden" name="id" id="editId"/>
                <label>技能名称：</label>
                <input type="text" name="name" id="editName"/>
                <label>技能描述：</label>
                <textarea name="description" id="editDescription" rows="4"  cols="50"></textarea>
                <button class="my_list_button" type="submit">修改</button>
            </form>
        </div>
    </div>

    <script>
        var addSkill = document.getElementById("addSkill");
        var addSkillModal = document.getElementById("addSkillModal");
        var close = document.getElementsByClassName("close")[0];

        addSkill.onclick = function() {
            addSkillModal.style.display = "block";
        }

        close.onclick = function() {
            addSkillModal.style.display = "none";
        }

        window.onclick = function(event) {
            if (event.target === addSkillModal) {
                addSkillModal.style.display = "none";
            }
        }
    </script>

    <script>
        var editSkills = document.getElementsByName("editSkill");
        var editSkillModal = document.getElementById("editSkillModal");
        var close = document.getElementsByClassName("close")[1];

        for (var i = 0; i < editSkills.length; i++) {
            editSkills[i].onclick = function() {
                editSkillModal.style.display = "block";
                var skill = this.parentElement.parentElement;
                var id = skill.children[0].value;
                var name = skill.children[1].innerText;
                var description = skill.children[2].innerText;
                document.getElementById("editId").value = id;
                document.getElementById("editName").value = name;
                document.getElementById("editDescription").value = description;
            }
        }

        close.onclick = function() {
            editSkillModal.style.display = "none";
        }

        window.onclick = function(event) {
            if (event.target === editSkillModal) {
                editSkillModal.style.display = "none";
            }
        }
    </script>
</body>
</html>
